<template>
  <div>
    <Card dis-hover :bordered="false" class="ivu-mt">
      <tableForm />
      <Table :columns="columns" :data="followPage" :loading="loading" size="small">
        <template slot="basic" slot-scope="{row}">
          <a @click="handlePatientDetail">{{row.basic}}</a>
        </template>
      </Table>
        <div class="ivu-mt ivu-text-center">
            <Page :total="listData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
    </Card>
    <detailed ref="detailed" />
  </div>
</template>
<script>
    import tableForm from './table-form';
    import detailed from '@/components/detailed'
    export default {
        components: { tableForm, detailed },
        data () {
            return {
                list: [],
                current: 1,
                size: 10,
                loading: false,
                columns: [
                    {
                        title: '基本信息',
                        key: 'basic',
                        slot: 'basic',
                        minWidth: 136,
                        fixed: 'left'
                    },
                    {
                        title: '诊室',
                        key: 'room',
                        minWidth: 100,
                        fixed: 'left'
                    },
                    {
                        title: '1月',
                        key: 'january',
                        minWidth: 60
                    },
                    {
                        title: '2月',
                        key: 'february',
                        minWidth: 60
                    },
                    {
                        title: '3月',
                        key: 'march',
                        minWidth: 60
                    },
                    {
                        title: '4月',
                        key: 'april',
                        minWidth: 60
                    },
                    {
                        title: '5月',
                        key: 'may',
                        minWidth: 60
                    },
                    {
                        title: '6月',
                        key: 'june',
                        minWidth: 60
                    },
                    {
                        title: '7月',
                        key: 'july',
                        minWidth: 60
                    },
                    {
                        title: '8月',
                        key: 'august',
                        minWidth: 60
                    },
                    {
                        title: '9月',
                        key: 'september',
                        minWidth: 60
                    },
                    {
                        title: '10月',
                        key: 'october',
                        minWidth: 70
                    },
                    {
                        title: '11月',
                        key: 'november',
                        minWidth: 70
                    },
                    {
                        title: '12月',
                        key: 'december',
                        minWidth: 70
                    },
                    {
                        title: '合计',
                        key: 'total',
                        minWidth: 70,
                        fixed: 'right'
                    }
                ]
            }
        },
        computed: {
            listData () {
                let data = [...this.list]
                return data;
            },
            followPage () {
                const data = this.listData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end)
            }
        },
        methods: {
            mockOneData () {
                const item = {};
                item.basic = '刘志强 男' + ' ' + Math.floor((Math.random() * 60) + 15) + '岁';
                item.room = '一诊';
                item.january = Math.floor((Math.random() * 5));
                item.february = Math.floor((Math.random() * 5));
                item.march = Math.floor((Math.random() * 5));
                item.april = Math.floor((Math.random() * 5));
                item.may = Math.floor((Math.random() * 5));
                item.june = Math.floor((Math.random() * 5));
                item.july = Math.floor((Math.random() * 5));
                item.august = Math.floor((Math.random() * 5));
                item.september = Math.floor((Math.random() * 5));
                item.october = Math.floor((Math.random() * 5));
                item.november = Math.floor((Math.random() * 5));
                item.december = Math.floor((Math.random() * 5));
                item.total = Math.floor((Math.random() * 50));
                return item
            },
            getData () {
                this.current = 1;
                this.loading = true;
                setTimeout(() => {
                    let data = [];
                    for (let i = 0; i < 100; i++) {
                        data.push(this.mockOneData());
                    }
                    this.list = data;
                    this.loading = false;
                }, 1000)
            },
            handlePatientDetail () {
                this.$refs.detailed.handledetail();
            }
        },
        mounted () {
            this.getData()
        }
    }
</script>
